import React, { useState } from 'react'
import { Layout, Menu, Button, theme, Dropdown, Space, Avatar } from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  DownOutlined,
  SmileOutlined
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import type { MenuProps } from 'antd'
const { Header, Sider, Content } = Layout
export default function TopHeader() {
  const navigate = useNavigate()
  const {
    role: { roleName },
    username
  } = JSON.parse(localStorage.getItem('token') || '{}')
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          {roleName}
        </a>
      )
    },
    {
      key: '4',
      danger: true,
      label: '退出'
    }
  ]
  const onClick: MenuProps['onClick'] = ({ key }) => {
    console.log(key)
    if (key == '4') {
      localStorage.removeItem('token')
      navigate('/login')
    }
  }

  const {
    token: { colorBgContainer, borderRadiusLG }
  } = theme.useToken()
  const [collapsed, setCollapsed] = useState(false)
  return (
    <Header style={{ padding: 0, background: colorBgContainer, display: 'flex', justifyContent: 'space-between' }}>
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed(!collapsed)}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64
        }}
      />
      <div style={{ paddingRight: 20 }}>
        <a>
          欢迎<span style={{ color: '#1890ff' }}>{username}</span>回来
        </a>
        <Dropdown menu={{ items, onClick }}>
          <Avatar size={44} icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}
